<!-- 认领页面
codeslizhi
@email: 1664234934@qq.com
@Date: 2022 3 9
 -->
<template>
	<view>
		<cu-custom class="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">认领页面</block>
		</cu-custom>
		<view class="solids-bottom padding-xs flex align-center">
			<view class="flex-sub text-center">
				<view class="solid-bottom text-xl padding">
					<text class=" text-red">广而告之：</text>
					<text class="text-black text-bold">很高兴我的平台可以帮到您，为了防止恶意认领现象的发生请填写您的信息，还望谅解！
					</text>
				</view>
			</view>
		</view> 
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">被认领物品名称：</view>
				<text  class="info_title">{{optionsTitle}}</text>
			</view>
			<view class="cu-form-group">
				<view class="title">认领人姓名：</view>
				<input placeholder="请输入认领人姓名" name="input" v-model="info1.claim_name"></input>
			</view>
			<!-- <view class="cu-form-group">
				<view class="title">认领人学号：</view>
				<input placeholder="请输入认领人学号" name="input" v-model="info1.number"></input>
			</view> --> 
			<view class="cu-form-group">
				<view class="title">认领人联系方式：</view>
				<input placeholder="输入手机号码" name="input" v-model="info1.claim_mobile"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view> 
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">认领人地址</view>
				<input placeholder="请输入认领人地址" name="input" v-model="info1.claim_address"></input>
				<text class='cuIcon-locationfill text-orange'></text>
			</view>
			<!-- <view class="cu-bar bg-white margin-top"> 
				<view class="action">
					认领人证件照
				</view>
				<view class="action">
					{{imgList.length}}/1
				</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
						:data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
			</view> -->
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" @click="onSubmit">提交</button>
			</view>
		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [], 
				id: 0,
				imgList: [],
				info1: {
					// id: undefined,
					// imgUrl: '',
					// address: '',
					// contact: '',
					// createTime: new Date(),
					// updateTime: new Date(),
					// goodsName: '',
					// // number: '',
					// userName: ''
					about:'',//留言 
					claim_address:'',//认领 / 拾物人地址 
					claim_mobile:'',//认领 / 拾物人手机号
					claim_name:'',//认领 / 拾物人姓名 
				},
				optionsTitle:'',
			}
		},
		methods: {
			onSubmit() {
				let myForm = this.info1
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				console.log("myForm", myForm)
				// if (!myForm.imgUrl || myForm.imgUrl.length == 0) {
				// 	this.$tip.alert('请上传图片');
				// 	return false
				// }
				if (!myForm.claim_name || myForm.claim_name.length == 0) {
					this.$tip.alert('请输入姓名');
					return false
				}
				// if (!myForm.number || myForm.number.length == 0) {
				// 	this.$tip.alert('请输入学号');
				// 	return false
				// } 
				if (!myForm.claim_address || myForm.claim_address.length == 0) {
					this.$tip.alert('请输入地址');
					return false
				}
				if (!checkPhone.test(myForm.claim_mobile)) {
					this.$tip.alert('请输入正确的手机号');
					return false 
				}
				// this.info1.goodsName = this.info.imgname

				const _this = this // 获取此时的this为一个常量，防止下面请求回调改变出错
				console.log("表单提交:" , _this.info1) 
				// 提交跳转
				let opts = { 
					url: ':8022/o/v1/order/claim/' + this.id, 
					method: 'POST',
				}; 
				let data = _this.info1;
				// console.log(data);
				this.$httpTokenRequest(opts, data).then((res) => {
					console.log(res)  
					this.loading = false;
					if (res.data.code === 0) { // 获取数据成功 
						console.log("成功")
						uni.switchTab({
							url: '../index/index'
						})
						this.$tip.success('请静候我们的联系!')
					} else if (res.data.code === 500) { // 获取数据失败
						console.log("失败")
						this.loading = false;
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = "请求出现错误，请稍后再试"
					this.loading = false;
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				}) 
			},
			// ChooseImage() {
			// 	uni.chooseImage({
			// 		count: 4, //默认9
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: (res) => {
			// 			if (this.imgList.length != 0) {
			// 				this.imgList = this.imgList.concat(res.tempFilePaths)
			// 			} else {
			// 				this.imgList = res.tempFilePaths
			// 			}

			// 			uni.uploadFile({
			// 				url: this.$BASE_URL.BASE_URL + '/upload',
			// 				method: 'POST',
			// 				name: 'file',
			// 				filePath: res.tempFilePaths[0]
			// 			}).then((res) => {
			// 				console.log("res1")
			// 				console.log(res)
			// 				this.loading = false;
			// 				if (res[1].statusCode === 200) { // 获取数据成功
			// 					console.log("成功")
			// 					var dataurl = res[1].data
			// 					console.log(JSON.parse(dataurl).url)
			// 					this.info1.imgUrl = JSON.parse(dataurl).url
			// 					this.$tip.success('上传成功!')
			// 				} else if (res[1].statusCode === 500) { // 获取数据失败
			// 					console.log("失败")
			// 					this.loading = false;
			// 					this.$tip.alert(res.data.message);
			// 				}
			// 			}).catch((err) => {
			// 				let msg = "请求出现错误，请稍后再试"
			// 				this.loading = false;
			// 				this.$tip.alert(msg);
			// 			}).finally(() => {
			// 				this.loading = false;
			// 			})
			// 		}
			// 	});
			// },
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			// DelImg(e) {
			// 	uni.showModal({
			// 		title: '主人',
			// 		content: '确定要删除这张照片吗？',
			// 		cancelText: '再看看',
			// 		confirmText: '再见',
			// 		success: res => {
			// 			if (res.confirm) {
			// 				this.imgList.splice(e.currentTarget.dataset.index, 1)
			// 			}
			// 		}
			// 	})
			// },
			// async getInfo() {
			// 	const res = await this.$myRequest({
			// 		url: '/goodsfirst/id?limit=1&page=1&sort=1&id=' + this.id
			// 	})
			// 	console.log(res)
			// 	this.info = res.data.data.items[0]
			// 	this.info1.imgname = this.info.imgname
			// },
			onLoad(options) {  
				this.optionsTitle = options.title;
				this.id = options.id 
				// this.getInfo()
			}
		}
	}
</script>

<style>
.info_title {
	color: red !important;
} 
.cu-form-group {
	justify-content: flex-start !important;
}
.bg-gradual-blue {
		background-image: linear-gradient(45deg, #0081ff, #1cbbb4) !important;
		color: #ffffff; 
}
</style>
